<template>
	<view>
		<van-nav-bar title="发起申请" right-text="申请记录" left-arrow fixed placeholder @click-left="onClickLeft"
			@click-right="onClickRight" />
		<van-form @submit="confirmRemoke">
			<view style="margin-top: 20rpx"></view>
			<van-cell-group inset>
				<van-field v-model="formData.holidayType" is-link readonly autosize name="picker" label="请假类型"
					placeholder="请选择请假类型" required :rules="[{ required: true, message: '请选择请假类型' }]"
					error-message-align="left" clearable @click="showTypePicker = true" />
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>

			<van-cell-group inset>
				<uni-datetime-picker :hide-second="true" v-model="formData.startTime" @change="changeStratTime">
					<van-field v-model="formData.startTime" is-link readonly autosize name="datePicker" label="开始时间"
						placeholder="请选择开始时间" required :rules="[{ required: true, message: '请选择开始时间' }]"
						error-message-align="left" clearable />
				</uni-datetime-picker>

				<uni-datetime-picker :hide-second="true" :start="startDate" :end="endDate" v-model="formData.endTime"
					@change="changeEndTime">
					<van-field v-model="formData.endTime" is-link readonly autosize name="datePicker" label="结束时间"
						placeholder="请选择结束时间" required :rules="[{ required: true, message: '请选择结束时间' }]"
						error-message-align="left" clearable>
					</van-field>
				</uni-datetime-picker>
				<van-field v-model="formData.totalDuration" autosize label="请假时长" placeholder="请假时长" required
					:rules="[{ required: true, message: '请假时长' }]" error-message-align="left" clearable readonly />
				<van-field v-model="formData.reason" autosize label="请假事由" placeholder="请假事由" type="textarea" rows="3"
					required :rules="[{ required: true, message: '请假事由' }]" error-message-align="left" clearable />
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>

			<van-cell-group inset>
				<van-field label-width="auto" name="annex" label="说明附件" input-align="right">
					<template #input>
						<Upload v-model:fileList="annex" :showFileList="false" @update="getFile" 
							accept="image" >
							<template #uploadAction>
								<van-icon name="add-o" size="24"></van-icon>
							</template>
						</Upload>
					</template>
				</van-field>
				<view v-if="annex.length>0">
					<view class="image-box w-full">
						<view v-for="(image, index) in annex" class="item items-center">
							<van-image
								:src="image"
								class="item"
								width="100"
								height="100"
								cover
								@click="handlePreview(image)"
							/>
							<el-icon
								class="icon"
								@click="remove(index)"
								color="#fff"
								v-if="!disabled"
							>
								<Close />
							</el-icon>
						</view>
					</view>
				</view>
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>
			<view class="card shcard">
				<view style="padding:30rpx 24rpx ;font-weight: 700;font-size: 30rpx;">审批流程</view>
				<view class="stepbox">
					<view class="stepItem">
						<view>
							<image :src="userInfo.avatar?userInfo.avatar:'../../static//images/noavatar.png'" mode="scaleToFill" class="avatar" />
						</view>
						<view class="person">
							<view>发起申请</view>
							<view class="nickname">我</view>
						</view>
					</view>
					<view class="stepItem" v-for="(item,index) in stepPerson" :key="index">
						<view>
							<image :src="item.avatar?item.avatar:'../../static//images/noavatar.png'" mode="scaleToFill" class="avatar" />
						</view>
						<view class="person">
							<view>{{item.nodeTitle}}</view>
							<view class="nickname">{{item.realityUserName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="boxx">
				<van-button type="primary" class="w-full" native-type="submit">提交</van-button>
			</view>
		</van-form>

		<!-- <view class="btn">确定</view> -->

		<view style="height: 100rpx;"></view>
		<van-popup :show="showTypePicker" round position="bottom">
			<van-picker :columns="typeColumns" @cancel="showTypePicker = false" @confirm="onTypeConfirm" />
		</van-popup>
		<van-calendar v-model:show="showStartPicker" @confirm="onStartConfirm" />
	</view>
</template>
<script setup>
import { Plus, Close } from "@element-plus/icons-vue";
	import {
		openStartApprove,
		dailyHolidayApproveAdd
	} from "@/api"
	import Upload from "@/components/upload";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		formatDate
	} from "@vueuse/core";

import { preview } from "@/utils/index";
import { USER_INFO_KEY } from "@/enums/cacheEnum"
  const userInfo = ref(cache.get(USER_INFO_KEY))
	import dayjs from 'dayjs'

	const stepPerson = ref([])
	const formData = ref({});
	const typeColumns = ref([{
			text: '事假',
			value: 'EVENT'
		},
		{
			text: '调休假',
			value: 'ADJUST'
		},
		{
			text: '病假',
			value: 'WEAKNESS'
		},
	])
	const holidayType = ref('')
	const showTypePicker = ref(false)
	const showStartPicker = ref(false)
	const startDate = ref('')
	const endDate = ref('')
    const annex=ref([])
	onLoad(async () => {
		// startDate.value=dayjs().format('YYYY-MM-DD HH:mm:ss');
		// let today = dayjs().startOf('day');
		// endDate.value=today.add(7, 'day').format('YYYY-MM-DD')+' 23:59:59';
		const res = await openStartApprove()
		stepPerson.value = res.data
		// console.asser

	})


    
    // 计算函数
    function diffTime(startDate, endDate) {
      console.log(startDate, endDate);
      startDate = new Date(startDate);
      endDate = new Date(endDate);
      //时间差的秒数
      let diff = Math.floor((endDate.getTime() - startDate.getTime()) / 1000);  
      let hours = diff / ( 60 * 60)  
      return hours;
    } 

	const changeStratTime = (e) => {
		console.log(e)
		if(formData.value.endDate){
			formData.value.totalDuration=diffTime(e,formData.value.endDate).toFixed(2)
		}
		

	}
	const changeEndTime = (e) => {
		console.log(e) 
		if(formData.value.startTime){ 
			formData.value.totalDuration=diffTime(formData.value.startTime, e).toFixed(2)
		}
	}
	// 上传组件获取回显
	const getFile = (res) => {
		console.log(res)
		annex.value = res.map((e) => e.url)
	}
	// 删除
	const remove = (index) => {
		annex.value.splice(index, 1); 
	};
	const handlePreview = async (file) => {
		preview(file);
	};
	onLoad(async () => {
		const res = await openStartApprove() 
		// console.asser
	})
	// 请假类型
	const onTypeConfirm = (e) => {
		console.log(e)
		formData.value.holidayType = e.selectedOptions[0]?.text;
		holidayType.value = e.selectedOptions[0]?.value;
		showTypePicker.value = false;
	}
	// 
	const onStartConfirm = (e) => {
		console.log(e)
	}
   const onClickRight=()=>{ 
      uni.navigateTo({
        url:'/pages/vacation/record?type=0'
      })
    }
	const confirmRemoke = async () => {
		console.log(122)
		try {
			formData.value.holidayType = holidayType.value
			if (formData.value.startTime) {
				formData.value.startTime = formData.value.startTime + ':00'
			}
			if (formData.value.endTime) {
				formData.value.endTime = formData.value.endTime + ':00'
			}
			if(annex.value.length>0){
				formData.value.annex=annex.value.join(",")
			}
			const res = await dailyHolidayApproveAdd(formData.value)
			console.log(res)
			feedback.toast("提交成功");
			uni.redirectTo({
				url:'/pages/vacation/record?type=0'
			})
		} catch (error) {} finally {

		}
	}
	const onClickLeft=()=>{
	   uni.navigateBack({
	    delta:1
	   })
	}
</script>
<style>
	.shcard /deep/ .van-steps {
		background: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.stepbox {
		padding: 30rpx;
		margin: 0 auto;
		box-sizing: border-box;

		.stepItem {
			display: flex;
			align-items: center;
			padding-bottom: 100rpx;
			position: relative;

			&::after {
				content: '';
				width: 5rpx;
				height: 80rpx;
				background: #e1e1e1;
				position: absolute;
				bottom: 10rpx;
				left: 42rpx;
			}

			&:nth-last-child(1) {
				padding-bottom: 0;

				&::after {
					display: none;
				}
			}

			.avatar {
				width: 90rpx;
				height: 90rpx;
				display: block;

				image {
					width: 90rpx;
					height: 90rpx;
					display: block;
				}

			}

			.person {
				padding-left: 40rpx;
				font-size: 28rpx;
				font-weight: 700;

				.nickname {
					color: #8d8d8d;
					font-weight: 400;
					padding-top: 10rpx;
				}
			}
		}
	}

	.card {
		background: #fff;
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}
 .boxx{ 
		margin: 30rpx auto;
		width: 690rpx;
	}
	.btn {
		width: 93%;
		height: 88rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 88rpx;
		background: #1158bf;
		color: #fff;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>
<style lang="scss" scoped>
.image-box {
	display: flex;
	flex-wrap: wrap;
	padding: 0 24rpx;
	padding-bottom: 20rpx;
	.item {
		flex: 0 0 100px;
		margin-right: 20rpx;
		position: relative;
		.icon {
			position: absolute;
			top: 0%;
			right: 20rpx;
			z-index: 999;
			background-color: #ee0a24;
		}
	}
}
.flie-box {
	width: calc(100% - 200rpx);
	margin-left: 20rpx;
}
.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	flex: 0 0 100px;
	text-align: center;
	border: 1rpx dashed $uni-border-color;
}
</style>